<template>
    <div>
        <div class="view_chartp">
            <div :id="chartId" :style="{ height: chartHeight + 'px',width:'100%' + 'px' }" />
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            chartId: { required: true, type: String },
            chartHeight: { required: true, type: Number },
            legendTop: { required: false, type: Number, default: 20 },
            //pieWidth: { required: false, type: Number, default: 500 },
            chartData: { required: [], type: Array },
            pieType: { required: [], type: Array },
            chartColor: { required: false, type: Array, default: () => [] },
            tooltipBackgroundColor: { required: false, type: String, default: ["transparent"] },
            tooltipBorderColor: { required: false, type: String, default: ["#fff"] }, 
            tooltipColor: {
                required: false,
                type: String, default: '#fff'
            },
            radius: { required: false, type: String, default: '' },
            pieTitle: { required: false, type: String, default: '' },
            txtColor: {
                required: false,
                type: Array,
                default: () => ["#000000"],
            },
        },
        data() {
            return {
            }
        },
        mounted() { },
        methods: {
            initChart() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById(this.chartId))
                var that = this;
                var max = this.chartData.reduce((prev, cur) => {
                    return prev + cur.value
                }, 0)
                myChart.setOption({
                    title: {
                        text: this.pieTitle,
                        textStyle: {
                            color: this.txtColor[0],
                        },
                        x: 'left'
                    },
                    tooltip: {
                        backgroundColor: this.tooltipBackgroundColor[0],
                        borderColor: this.tooltipBorderColor[0],
                        textStyle: {
                            color: this.tooltipColor,
                            fontSize: 14
                        },
                        trigger: 'item',
                        formatter(params) {
                            return params.name + ' : ' + params.value + ' (' + params.percent + '%)' + '<br/>' + '型号 : ' + `${that.pieType.find(x => x.name === params.name).value}`
                        },
                        //formatter: "{b} : {c} ({d}%)"
                    },
                    legend: {
                        textStyle: {
                            color: this.txtColor[0],
                        },
                        orient: 'vertical',
                        right: '5',
                        show:false,
                        top: this.legendTop,
                        data: this.setChartLegendOption(this.chartData),
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel'],
                                option: {
                                    funnel: {
                                        x: '25%',
                                        width: '50%',
                                        funnelAlign: 'left',
                                        max: 1548
                                    }
                                }
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    series: [
                        {
                            name: '细则',
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            data: this.setChartOption(this.chartData)
                        },
                        {                            name: '详情',                            type: 'pie',                            radius: '65%',                            center: ['50%', '50%'],                            label: {                                normal: {                                    position: 'inner',                                    formatter: (item) => `${item.percent.toFixed(0)}%`,                                    textStyle: {
                                        color: this.txtColor[0],
                                    }                                },                            },                            data: this.setChartOption(this.chartData)                        },
                    ]
                })
            },
            changeSize(height) {
                var myChart = echarts.init(document.getElementById(this.chartId))
                myChart.resize('auto', height)
            },
            setChartOption(data) {
                const formatData = []
                // var total = data.reduce((prev, cur) => {
                //   return prev + cur.value;
                // }, 0);
                data.forEach(item => {
                    formatData.push({
                        value: item.value,
                        name: item.name,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                }
                            }
                        }
                    })
                })
                return formatData
            },
            setChartLegendOption(data) {
                const formatData = []
                // var total = data.reduce((prev, cur) => {
                //   return prev + cur.value;
                // }, 0);
                data.forEach(item => {
                    formatData.push(item.name)
                })
                return formatData
            }
        },
        template: "#template"
    }
</script>
<style scoped>
    
</style>
